<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            font-size: 12px;
        }
        
        .checked {
            border: 1px solid red;
            font-size: 14px;
            font-weight: bold;
        }
        
        .olTest {
            width: 200px;
        }
        
        .olTest li {
            list-style: none;
            width: 30px;
            height: 30px;
            margin: 5px;
            background-color: black;
            border-radius: 15px;
            color: white;
            float: left;
            font-size: 16px;
            line-height: 30px;
        }
    </style>
    <script>
        function init() {
            document.getElementById("btnTest").addEventListener("click", () => {
                let elements = document.getElementsByTagName("main")[0].querySelectorAll("[class~=checked]");
                if (elements.length != 0) {
                    elements.forEach((element) => {
                        element.classList.remove("checked");
                    });
                }
                let cssValue = document.getElementById("cssValue").value;
                console.log(cssValue);
                let checkedEelement = document.getElementsByTagName("main")[0].querySelectorAll(cssValue);
                if (checkedEelement.length == 0) {
                    alert("没有找到选择器所对应的元素！");
                } else {
                    checkedEelement.forEach((element) => {
                        element.classList.add("checked");
                    });
                }
            }, false);
        }
        window.addEventListener("load", init, false);
    </script>
</head>

<body>
    <h1>CSS选择器测试环境</h1>
    <section id="sectionTest">
        输入选择器：<input type="text" id="cssValue">
        <button type="button" id="btnTest">测试</button>
        <hr>
    </section>
    <main>
        <input type="text" list="alist">
        <datalist id="alist">
            <option>苹果</option>
            <option>小米</option>
            <option>烧鸡</option>
        </datalist>
        <ol>
            <br>
            <li>熊大</li>
            <li>熊二</li>
            <li>光头强</li>
            <li>吉吉</li>
            <li>猪猪侠</li>
            <li>奇奇</li>
        </ol>
        <section id="sectionDiv">
            <button type="button" class="btnNumber">1</button><br>
            <button type="button" class="btnNumber">2</button><br>
            <button type="button" class="btnNumber">3</button><br>
        </section>
        <input id="inputTest"></input>
        <br>
        <a href="#">我是一个a标签</a>
        <p class="abc cba">
            我是一P元素
        </p>
        <section style="float: left">
            <h2>简单标签</h2>
            <input type="text">
            <figure>
                <img class="borderColor borderBox" id="logo" src="../img/login_logo.jpg" alt="logo" title="一个小孩">
                <figcaption>一个小朋友</figcaption>
            </figure>
            <div>我是一个块级标签</div>
            <img hidden id="test" src="../img/ooopic_1506740284.png">
            <br>
            <button>注册</button>
            <p class="class1 class2">
                我是捣乱的。
            </p>
            <a class="borderColor" href="../index.html">这是一个超链接</a>我不是一个超链接
            <a>我也是一个超链接</a>
            <div>我是一个p标签中的div标签
                <nav>
                    <p>我是一个P标签</p>
                </nav>
                <p>我也是一个p标签</p>
            </div>
            <p>
                <nav>我是一个小导航</nav>
                <a href="#">我是p标签中的a标签</a>
            </p>
            <div class="userName_error_img">userName_error_img</div>
        </section>
        <section style="float: left">
            <p style="width:300px;">
                伪元素选择器的前缀是两个冒号字符（::），但浏览器认为选择器只有一个冒号。这样它的格式就跟伪类选择器的格式一致了。虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，建议在目前还是使用单冒号的写法。
            </p>
            <div class="email_error_img class1">email_error_img</div>s
        </section>
        <section style="float: left">
            <h2>盒子属性</h2>
            <div class="contentBox" style="box-sizing: content-box">
                contentBoxcontentBoxcontentBoxcontentBoxcontentBoxcontentBoxcontentBox
            </div>
            <div class="borderBox" style="box-sizing: border-box">
                IEBox
            </div>
        </section>
        <section>
            <pre>北斗七星高，
哥舒夜带刀。
        </pre>
            <ol style="padding-left:0px;list-style-position: inside">
                <li>熊大</li>
                <li>光头强</li>
                <li>熊二</li>
            </ol>
            <ul>
                <li>熊大</li>
                <a>吉吉</a>
                <li>光头强</li>
                <li>熊二</li>
            </ul>
            <dl>
                <dt>张居正</dt>
                <dd>明朝万历年间的首辅，....</dd>
            </dl>
        </section>
        <section>
            <nav>
                <ol class="olTest">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                </ol>
            </nav>
        </section>
    </main>
</body>

</html